<template>
    <div>
        <van-form :ref="formData">
            <!--编辑节点10-->
            <div v-if="this.subTaskInfo.status !== '3'">
              <van-row class="rowLabel">
                <van-col span="12"  class="colCss">
                    <div class="taskName">任务编号：</div>
                    <div class="taskInfo">{{subTaskInfo.taskCode}}</div>
                </van-col>
                <van-col span="12"  class="colCss">
                    <div class="taskName">任务名称：</div>
                    <div class="taskInfo">{{mainTaskInfo.taskName}}</div>
                </van-col>
              </van-row>
              <van-row class="rowLabel">
                <van-col span="12" class="colCss">
                  <div class="taskName">节点名称：</div>
                  <div class="taskInfo">{{taskNodeName}}</div>
                </van-col>
                <van-col span="12" class="colCss">
                    <div class="taskName">电芯型号：</div>
                    <div class="taskInfo">{{subTaskInfo.electricCoreType}}</div> 
                </van-col>
              </van-row>
              <van-row class="rowLabel">
                <van-col span="12" class="colCss">
                  <div class="taskName">电芯编号：</div>
                    <div class="taskInfo">{{subTaskInfo.electricCoreCode}}</div>
                </van-col>
              </van-row>
              <van-row>
                <van-col span="12">
                  <van-field name="barcode"
                            v-model="formData.barcode"
                            label="极组条码："
                            placeholder="请输入极组条码"
                            :rules="[{ required: true, message: '请输入极组条码' }]" />
                </van-col>
                <van-col span="12" class="defectSelect">
                    <van-field name="checkboxGroup" label="缺陷类型：">
                      <template #input>
                        <van-checkbox-group v-model="formData.defectTypeIdList" direction="horizontal">
                          <van-checkbox v-for="(item,index) in defectList" 
                          :key="index"
                          :name="item.defectTypeId" 
                          shape="square">
                          {{item.defectName}}
                        </van-checkbox>
                        </van-checkbox-group>
                      </template>
                  </van-field>

                </van-col>
              </van-row>
              <van-row>
                <van-col span="10">
                  <van-field name="thickness"
                            v-model="formData.thickness"
                            label="极组厚度："
                            placeholder="请输入极组厚度"
                            :rules="[{ required: true, message: '请输入极组厚度' }]" />

                </van-col>
                <van-col span="2">
                  <div class="formUnit">毫米(MM)</div>
                </van-col>
                <van-col span="10">
                  <van-field name="positivePoleBottom"
                            v-model="formData.positivePoleBottom"
                            label="正极柱下侧："
                            placeholder="请输入正极柱下侧"
                            :rules="[{ required: true, message: '请输入正极柱下侧' }]" />
                </van-col>
                <van-col span="2">
                  <div class="formUnit">毫米(MM)</div>
                </van-col>
              </van-row>
              <van-row>
                <van-col span="10">
                  <van-field name="code"
                            v-model="formData.explosionTrapBottom"
                            label="防爆阀下侧："
                            placeholder="请输入防爆阀下侧"
                            :rules="[{ required: true, message: '请输入防爆阀下侧' }]" />

                </van-col>
                <van-col span="2">
                  <div class="formUnit">毫米(MM)</div>
                </van-col>
                <van-col span="10">
                  <van-field name="negativePoleBottom"
                            v-model="formData.negativePoleBottom"
                            label="负极柱下侧："
                            placeholder="请输入负极柱下侧"
                            :rules="[{ required: true, message: '请输入负极柱下侧' }]" />

                </van-col>
                <van-col span="2">
                  <div class="formUnit">毫米(MM)</div>
                </van-col>
                
              </van-row>
              <van-field name="remark"
                        v-model="formData.remark"
                        rows="2"
                        autosize
                        label="问题描述："
                        type="textarea"
                        maxlength="100"
                        placeholder="请输入问题描述"
                        show-word-limit />
            </div>
            <!--查看节点10-->
            <div v-if="this.subTaskInfo.status === '3'">
              <van-row class="rowLabel">
                <van-col span="12"  class="colCss">
                    <div class="taskName">任务编号：</div>
                    <div class="taskInfo">{{subTaskInfo.taskCode}}</div>
                </van-col>
                <van-col span="12"  class="colCss">
                    <div class="taskName">任务名称：</div>
                    <div class="taskInfo">{{mainTaskInfo.taskName}}</div>
                </van-col>
              </van-row>
              <van-row class="rowLabel">
                <van-col span="12" class="colCss">
                  <div class="taskName">节点名称：</div>
                  <div class="taskInfo">{{taskNodeName}}</div>
                </van-col>
                <van-col span="12" class="colCss">
                    <div class="taskName">电芯型号：</div>
                    <div class="taskInfo">{{subTaskInfo.electricCoreType}}</div> 
                </van-col>
              </van-row>
              <van-row class="rowLabel">
                <van-col span="12" class="colCss">
                  <div class="taskName">电芯编号：</div>
                  <div class="taskInfo">{{subTaskInfo.electricCoreCode}}</div>
                </van-col>
              </van-row>
              <van-row class="rowLabel">
                <van-col span="12" class="colCss">
                  <div class="taskName">极组条码：</div>
                  <div class="taskInfo">{{formData.barcode}}</div>
                </van-col>
                <van-col span="12" class="colCss">
                  <div class="taskName">缺陷类型：</div>
                  <div class="taskInfo">{{formData.defectTypeNames}}</div>
                </van-col>
              </van-row>
              <van-row class="rowLabel">
                <van-col span="12" class="colCss">
                  <div class="taskName">极组厚度：</div>
                  <div class="taskInfo">{{formData.thickness}}&nbsp;&nbsp;毫米(MM)</div>
                </van-col>
                <van-col span="12" class="colCss">
                  <div class="taskName">正极柱下侧：</div>
                  <div class="taskInfo">{{formData.positivePoleBottom}}&nbsp;&nbsp;毫米(MM)</div>
                </van-col>
              </van-row>
              <van-row class="rowLabel">
                <van-col span="12" class="colCss">
                  <div class="taskName">防爆阀下侧：</div>
                  <div class="taskInfo">{{formData.explosionTrapBottom}}&nbsp;&nbsp;毫米(MM)</div>
                </van-col>
                <van-col span="10" class="colCss">
                  <div class="taskName">负极柱下侧：</div>
                  <div class="taskInfo">{{formData.negativePoleBottom}}&nbsp;&nbsp;毫米(MM)</div>
                </van-col>
              </van-row>
              <van-row class="rowLabel">
                <van-col span="24" class="colCss">
                  <div class="taskName">问题描述：</div>
                  <div class="taskInfo">{{formData.remark}}</div>
                </van-col>
              </van-row>
            </div>
        </van-form>
    </div>
</template>

<script>
    export default {
        name: 'Form8', 
        props: {
            formDataProp: {
                type: Object,
                default: {}
            },
            mainTaskInfoProp: {
                type: Object,
                default: {}
            },
            subTaskInfoProp: {
                type: Object,
                default: {}
            },
            taskNodeNameProp: {
                type: String,
                default: ''
            },
            defectListProp: {
                type: Array,
                default: []
            }
        },
        data() {
            return {
              formData: {},
              subTaskInfo: {},
              mainTaskInfo: {},
              taskNodeName: '',
              defectList: [],
              defectOptionList: []
            }
        },
        created() {
        },
        mounted() {
        },
        watch: {
            formDataProp: {
                handler(newVal, oldVal) {
                    this.formData = newVal;
                },
                deep: true,
                immediate: true
            },
            mainTaskInfoProp: {
                handler(newVal, oldVal) {
                    this.mainTaskInfo = newVal;
                },
                deep: true,
                immediate: true
            },
            subTaskInfoProp: {
                handler(newVal, oldVal) {
                    this.subTaskInfo = newVal;
                },
                deep: true,
                immediate: true
            },
            taskNodeNameProp: {
                handler(newVal, oldVal) {
                    this.taskNodeName = newVal;
                },
                deep: true,
                immediate: true
            },
            defectListProp: {
                handler(newVal, oldVal) {                    
                    if (newVal.currentDefectList) {
                        let arr = [];
                        newVal.currentDefectList.forEach(item => {
                            arr.push({ id: item.defectTypeId, text: item.defectName });
                        });
                        this.defectOptionList = arr;
                    }
                    this.defectList = newVal.currentDefectList;
                },
                deep: true,
                immediate: true
            }
        },
        methods: {
          getFormData(commonParam) {
            let param = JSON.parse(JSON.stringify(commonParam));
            param.defectTypeIdList = this.formData.defectTypeIdList;
            param.remark = this.formData.remark;
            param.barcode = this.formData.barcode;
            param.thickness = this.formData.thickness;
            param.positivePoleBottom = this.formData.positivePoleBottom;
            param.explosionTrapBottom = this.formData.explosionTrapBottom;
            param.negativePoleBottom = this.formData.negativePoleBottom;
            param.export = {}
            param.export.groupThickness = this.formData.thickness;
            param.export.positivePoleBottom2 = this.formData.positivePoleBottom;
            param.export.explosionTrapBottom2 = this.formData.explosionTrapBottom;
            param.export.negativePoleBottom2 = this.formData.negativePoleBottom;
            return param
          }
        }
    }
</script>

<style lang="scss" scoped>
.rowLabel {
  color: #646566;
  .colCss {
    padding: 10px 16px;
  }
}

.rowLabel{
  .taskName{
    display: inline-block;
    width: 6.2em;
  }
  .taskInfo{
    display: inline-block;
    margin-left:12px;
  }
}

.defectSelect{
  .van-cell__value,.van-field__value{
    border: none!important;
    padding: 0px!important;
  }
}

.formUnit{
  line-height:56px;
}
</style>